<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			/*复合选择器*/
			h1.aaa{
				color:red;
			}
			p#bbb{
				color:blue;
			}
			/*组合选择器（集体声明）*/
			h1,p,div,.ccc{
				font-size:30px;
			}
			div{
				background:#bold;
			}
			/*嵌套选择器（层次关系）*/
			/*div p{
				color:green;
				text-decoration:underline;
			}*/
			/*必须是父子关系才行，CSS3中新增*/
			div h3.ddd{
				color:pink;
			}
		</style>
	</head>
	<body>
		<h1 class="aaa">welcome</h1>
		<h4 class="aaa">css</h4>
		<h1>hello</h1>
		<p id="bbb">world</p>
		<p>html</p>
		<div>web开发</div>
		<span class="ccc">java开发</span>
		
		<div>
			<h3 class="ddd">div内部的h3</h3>
			<p>div内部的p</p>
			<p class="ddd"></p>
		</div>
		
		<div>
			<h2>
				<p>div内部的h2内部的h3</p>
			</h2>
		</div>
		<h3 class="ddd">h3h3h3</h3>
		
	</body>
</html>
